<template>
    <div>
        <mainTitleText>
            <span slot="account" class="account">公司管理</span>
            <span slot="accountEnglish">COMPANY MANAGEMENT</span>
        </mainTitleText>
        <div class="add company-add">
            <form class="layui-form form1" :form1="form1" >
               <div class="layui-form-item add-company">
                    <label class="layui-form-label">添加公司：</label>
                   <div class="layui-input-inline">
                       <input
                               class="layui-input"
                               lay-verify="required"
                               required
                               name="name"
                               type="text"
                               maxlength="20"
                               autocomplete="off"
                               placeholder="公司名称">
                   </div>
                   <div class="layui-input-inline">
                       <input
                               class="layui-input"
                               lay-verify="phone"
                               required
                               name="telephone"
                               type="tel"
                               maxlength="11"
                               autocomplete="off"
                               placeholder="账号（手机号）">
                   </div>
                   <div class="layui-input-inline" v-show="isAddShowValue.isProject"
                        style="width: 220px;">
                       <div class="layui-input-block">
                           <select
                                   lay-filter="project"
                                   name="project"
                                   xm-select="project"
                                   xm-select-show-count="1"
                                   xm-select-search-type="dl"
                                   :lay-verify="isAddShowValue.isProject?'required':''"
                                   lay-search>
                               <option value="">所属项目</option>
                               <option
                                       :value="item.id"
                                       v-for="(item,index) in add.project">{{item.project}}</option>
                           </select>
                       </div>
                   </div>
                   <div class="layui-input-inline" v-if="isAddShowValue.isDistribute">
                       <div class="layui-input-block">
                           <select
                                   lay-filter="distribute"
                                   name="distribute"
                                   :lay-verify="isAddShowValue.isDistribute?'required':''"
                                   lay-search>
                               <option value="">拓展人</option>
                               <option
                                       :value="item.id"
                                       v-for="(item,index) in add.expand">{{item.name}}</option>
                           </select>
                       </div>
                   </div>
                   <div class="layui-input-inline">
                           <select
                                   lay-filter="function"
                                   name="fun"
                                   lay-verify="required"
                                   xm-select="function"
                                   xm-select-show-count="1"
                                   xm-select-search-type="dl"
                                   lay-search>
                               <option value="">请选择功能</option>
                               <option :value="item.id" v-for="(item,index) in add.gongneng">{{item.fun}}</option>

                           </select>
                   </div>
                       <button
                               class="layui-btn btn"
                               type="button"
                               lay-submit
                               lay-filter="formDemoPane">添加</button>
                </div>
            </form>
        </div>
        <div class="main">
            <div class="search">
                <span>共找到{{count}}个账号</span>
                <form class="layui-form layui-form-pane form-search">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input
                                    type="text"
                                    name="key"
                                    v-model="search"
                                    placeholder="请输入关键字"
                                    autocomplete="off"
                                    onkeydown="if(event.keyCode==13)return false;"
                                    class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <table id="table"
                   :formTable="formTable"
                   lay-filter='text'
                   style="width: 100%!important;"></table>
            <script type="text/html" id="barDemo">
                  <a class="layui-btn layui-btn-xs" style="background-color:#cd1f5c " lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                   <a class="layui-btn layui-btn-xs" style="background-color: #999" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
            <!--点击编辑弹出修改页面-->
            <div id="edit" class="">
                <form action="" class="layui-form" :form2="form2" lay-filter="form2">
                    <div class="layui-form-item">
                        <label class="layui-form-label">公司名称</label>
                        <div class="layui-input-inline">
                            <input
                                    class="layui-input"
                                    lay-verify="required"
                                    required
                                    name="name"
                                    type="text"
                                    maxlength="20"
                                    autocomplete="off"
                                    placeholder="公司名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号(手机号)</label>
                        <div class="layui-input-inline">
                            <input
                                    class="layui-input"
                                    lay-verify="phone"
                                    required
                                    name="telephone"
                                    type="tel"
                                    maxlength="11"
                                    autocomplete="off"
                                    placeholder="账号（手机号）">
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="isExitShowValue.isProject">
                        <label class="layui-form-label">所属项目</label>
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="project1"
                                    name="project"
                                    xm-select="project1"
                                    xm-select-show-count="1"
                                    xm-select-search-type="dl"
                                    :lay-verify="isExitShowValue.isProject?'required':''"
                                    lay-search>
                                <option value="">所属项目</option>
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in add.project">{{item.project}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" v-show="isExitShowValue.isDistribute">
                        <label class="layui-form-label">拓展人</label>
                        <div class="layui-input-inline">
                            <select
                                    id="distribute1"
                                    lay-filter="distribute1"
                                    name="distribute"
                                    :lay-verify="isExitShowValue.isDistribute?'required':''"
                                    lay-search>
                                <option value="">拓展人</option>
                                <option
                                        :value="item.id"
                                        v-for="(item,index) in add.expand">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请选择功能</label>
                        <div class="layui-input-inline">
                            <select
                                    lay-filter="function1"
                                    name="fun"
                                    lay-verify="required"
                                    xm-select="function1"
                                    xm-select-show-count="1"
                                    xm-select-search-type="dl"
                                    lay-search>
                                <option value="">请选择功能</option>
                                <option :value="item.id" v-for="(item,index) in add.gongneng">{{item.fun}}</option>


                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <button
                                    class="layui-btn btn"
                                    type="button"
                                    lay-submit
                                    lay-filter="amend">确认
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import mainTitleText from '@/components/module/mainTitleText'
    export default {
        name: "company",
        props:['urls','login'],
        components:{
            mainTitleText:mainTitleText
        },
        data(){
            return {
                count:'',
                search:'',//搜索key值
                add:{//页面select值
                    project:'',
                    fenxiao:'',
                    gongneng:'',
                    position:''
                },
                values:{},
                isAddShowValue:{
                    isDistribute:false,
                    isProject:true,
                },
                isExitShowValue:{
                    isDistribute:false,
                    isProject:false,
                },
                fields:{
                    number:{field:'numbers', title: '序号',type:'numbers',width:80},
                    name:{field: 'name', title: '公司名称',},
                    telephone:{field: 'telephone', title: '电话',},
                    project:{field: 'project', title: '所属项目',},
                    distribute1:{field: 'distribute1', title: '拓展人',},
                    time:{field: 'time', title: '录入时间'},
                    right:{title: '操作', align: 'center', toolbar: '#barDemo', fixed: 'right'}//这里的toolbar值是模板元素的选择器}
                }

            }
        },
        created(){
            let _this = this;
            if(this.login.role === '罗宅总经理' || this.login.role === '房金总经理'){
                this.isAddShowValue.isDistribute = true;
                this.isAddShowValue.isProject = false;
            }else{
                this.isAddShowValue.isDistribute = false;
                this.isAddShowValue.isProject = true;
            }
            $.ajax({//获取select数据
                type:'POST',
                url:_this.urls.company.data,
                success:function(res){
                    // console.log(res);
                    _this.add.project= res.project;
                    _this.add.fenxiao= res.fenxiao;
                    _this.add.gongneng= res.gongneng;
                    _this.add.position= res.position;
                    _this.add.expand= res.expand;

                    layui.use(['table','form','formSelects'],function(){
                        var table = layui.table;
                        var form = layui.form;
                        var formSelects = layui.formSelects;
                        _this.$nextTick(function(){
                            form.render();
                            formSelects.render({
                                skin:'default',
                            });
                        })


                    })
                }
            });
        },
        computed:{
            form1(){
                var _this= this;
                layui.use(['form','formSelects'],function(){
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    _this.$nextTick(function(){
                        formSelects.render({
                            skin:'default',
                        })
                    });
                    form.on('submit(formDemoPane)',function(data){//添加成功，重载数据表
                         // console.log(data)
                        if(_this.login.role1 === 11){//添加参数‘role：11’，后台规定数值，不可修改删除
                            data.field['role'] = 15;
                        }else{
                            data.field['role'] = 24;
                        }
                        $.post(_this.urls.company.addPush,data.field,function(res){
                            layer.msg(res.message);
                            layui.use(['table'], function () {
                                var table = layui.table;
                                table.reload('idTest',{});
                                $("form")[0].reset();
                                formSelects.value('function',['']);
                                formSelects.value('project',['']);
                            })
                        })
                    });
                })
            },
            form2(){//编辑
                var _this = this;
                layui.use(['form','jquery','formSelects'], function () {
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    _this.$nextTick(function(){
                        formSelects.render({
                            skin:'default',
                        })
                    });
                    form.on('submit(amend)',function(data){
                        // console.log(data)
                        data.field.id = _this.values.id;
                        if(_this.login.role1 === 11){//添加参数‘role：11’，后台规定数值，不可修改删除
                            data.field['role'] = 15;
                        }else{
                            data.field['role'] = 24;
                        }
                        $.post(_this.urls.company.addPush,data.field,function(res){
                            layer.msg(res.message);
                            layui.use(['table'], function () {
                                var table = layui.table;
                                var url = _this.urls.company.manage;
                                table.reload('idTest', {
                                    url: url,
                                });
                                layer.closeAll('page');
                                $('#edit').hide()
                            })
                        })
                    })
                    form.render();
                })
            },
            formTable() {
                var _this = this,
                    url = this.urls.company.manage,
                    cols = [], arr = [], sub = [];
                layui.use(['table','form','formSelects'], function () {
                    var table = layui.table;
                    var form = layui.form;
                    var formSelects = layui.formSelects;
                    cols.push(//将table头对象信息组为数组
                        _this.fields.number,
                        _this.fields.name,
                        _this.fields.telephone,
                        _this.fields.distribute1,
                        _this.fields.project,
                        _this.fields.time,
                        _this.fields.right,
                    );
                    for(var x in cols){
                        if(_this.login.role === '房金总经理' || _this.login.role === '罗宅总经理'){
                            delete cols[4]
                        }else{
                            delete cols[3]
                        }
                        arr.push(cols[x]);
                    }
                    _this.$nextTick(function () {
                        //实例
                        table.render({
                            elem: '#table'
                            , id: 'idTest'
                            , height: '491'
                            , limit: 10
                            , url: url //数据接口
                            , page: {theme: '#cd1f5c'} //开启分页
                            , cols: [arr]
                            , done: function (res, curr, count) {//渲染完成回调，获取总条目数。
                                _this.count = count;
                                // console.log(res, curr, count)

                            }
                        });
                    })
                    //监听工具条事件
                    table.on('tool(text)', function (obj) {
                        var data = obj.data //获得当前行数据
                            , layEvent = obj.event; //获得 lay-event 对应的值
                        if (layEvent === 'del') {
                            layer.confirm('您确定要删除吗？', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                                $.ajax({
                                    type:'GET',
                                    url:_this.urls.company.del,
                                    data:{id:data.id},
                                    success:function(res){
                                        layer.msg(res.message)
                                    }
                                })
                            });
                        }else if(layEvent === 'edit'){
                            var arr=[],sub=[];
                            _this.values = obj.data;
                            arr.push((_this.values.fun).split(','));
                            sub.push((_this.values.project1).split(','));
                            if(_this.values.project === ''){
                                _this.isExitShowValue.isProject = false
                            }else{
                                _this.isExitShowValue.isProject = true
                            }

                            if(_this.values.distribute1 === ''){
                                _this.isExitShowValue.isDistribute = false
                            }else{
                                _this.isExitShowValue.isDistribute = true
                            }
                            _this.$nextTick(function(){
                                formSelects.render('function1',{
                                    init:arr[0],
                                    skin:'default',
                                });
                                formSelects.render('project1',{
                                    init:sub[0],
                                    skin:'default',
                                });
                        });
                            // console.log(obj.data)
                            // $('#distribute1').val(_this.values.distribute);
                            form.val('form2',{
                                "name":obj.data.name,
                                "telephone":obj.data.telephone,
                                "distribute":_this.values.distribute
                            });
                            layer.open({
                                type: 1,
                                area:['420px','450px'],
                                title:['编辑账号管理'],
                                content: $('#edit'),
                                cancel:function(){
                                    $('#edit').hide();
                                }
                            });
                        }
                    });
                });
            }
        },
        methods:{
            // btn(){//代理事件
            //     this.isType = true;
            //
            // },
            // btn1(){//渠道事件
            //     this.isType = false;
            // },
            searchPush(){//search 获取查询数据 重载表格
                var key = this.search,
                    url = this.urls.company.manage;
                layui.use(['table'], function () {//搜索直接更新表格数据
                    var table = layui.table;
                    table.reload('idTest', {
                        url: url,
                        where:{
                            key:key
                        }
                    });
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .add {
        .add-company{
            .layui-input-inline{
                margin-bottom: 10px;
            }
        }
        .type {
            margin-bottom: 10px;
        }
        label {
            height: 40px;
            line-height: 40px;
        }
        .btn {
            .blg(to right, #cd1f5c, #e11e27);
            color: @cf;
            border: none;
        }
    }

    .main {
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            .pr;
            > span, > .form-search {
                .fl;
            }
            > .form-search {
                .pa;
                right: 20px;
                .layui-form-item {
                    .pr;
                    .layui-input-inline {
                        width: 220px;
                        height: 30px !important;
                        margin: 0 38px 0 0;
                        input {
                            height: 30px !important;
                            .br(2px 0 0 2px);
                        }
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                        .br(0 2px 2px 0);
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }

        }
    }

    #edit {
        width: 100%;
        height: 100%;
        padding: 20px;
        display: none;
        form {
            width: 100%;
            height: 100%;
            label {
                width: 120px;
                height: 40px;
                line-height: 40px;
                padding-right: 20px;
            }
            .layui-form-item {
                margin-bottom: 15px;
                clear: both;
            }
        }
        button {
            .blg(to right, #cd1f5c, #e11e27);
        }

    }

</style>